{% extends 'basic/component.html' %}
{% load static %}
{% load i18n %}

{% block pageTitle %}
    {% trans 'Perovskite oxide Stability Prediction' %}
{% endblock %}

{% block pageHeadExtra %}
{% endblock %}

{% block pageBody %}
 <div class="page container">
    <h1>{% trans 'Perovskite oxide Stability Prediction' %}</h1>
    <div class="panel panel-default">
        <div class="panel-body">
            <div id="" class="tab-pane">
                <h3 style="text-align: center">{% trans 'Fill in the Molecular Formula' %}</h3>
                <div class="dividing"></div>
                <div class="row">
                    <div class="col-lg-2 col-sm-2"></div>
                    <div class="col-lg-8 col-sm-8">
                    <div class="row">
                        <form class="form-horizontal" id="register-form" >
                            <div class="form-group">
                                <div class="col-sm-1"></div>
                                <div class="col-sm-1">
                                    <span class="label label-primary">&nbsp;&nbsp;A:&nbsp;&nbsp;</span>
                                </div>
                                <div class="col-sm-10">
                                    <label for="asite_s1" class="col-sm-2 control-label">{% trans 'site 1#:' %}</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="asite_s1" name="asite_s1" placeholder="{% trans 'Species 1#' %}">
                                    </div>
                                    <label for="asite_n1" class="col-sm-2 control-label">{% trans 'num 1#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="asite_n1" name="asite_n1" placeholder="{% trans 'Number 1#' %}">
                                    </div>
                                </div>
                            </div>{# A 1# #}
                            <div class="form-group">
{#                                <div class="col-sm-2">#}
{#                                    <label class="species">Ba,La,Y,Pr,Gd,Dy,Ho,Nd,Sm</label>#}
{#                                </div>#}
                                <div class="col-sm-offset-2 col-sm-10">
                                    <label for="asite_s2" class="col-sm-2 control-label">{% trans 'site 2#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control s" id="asite_s2" name="asite_s2" placeholder="{% trans 'Species 2#' %}">
                                    </div>
                                    <label for="asite_n2" class="col-sm-2 control-label">{% trans 'num 2#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control n" id="asite_n2" name="asite_n2" placeholder="{% trans 'Number 2#' %}" disabled>
                                    </div>
                                </div>
                            </div>{# A 2# #}
                            <div class="form-group">
                                <div class="col-sm-2">
{#                                    <label class="species">Ca,Sr,Bi,Cd,Sn,Zn</label>#}
                                </div>
                                <div class="col-sm-10">
                                    <label for="asite_s3" class="col-sm-2 control-label">{% trans 'site 3#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control s" id="asite_s3" name="asite_s3" placeholder="{% trans 'Species 3#' %}">
                                    </div>
                                    <label for="asite_n3" class="col-sm-2 control-label">{% trans 'num 3#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control n" id="asite_n3" name="asite_n3" placeholder="{% trans 'Number 3#' %}" disabled>
                                    </div>
                                </div>
                            </div>{# A 3# #}
                            <div class="form-group">
{#                                <div class="col-sm-2">#}
{#                                    <label class="species">Ca,Sr,Bi,Cd,Sn,Zn</label>#}
{#                                </div>#}
                                <div class="col-sm-offset-2 col-sm-10 contain-species">
                                    <label class="species">{% trans 'Species for A site' %}: Ba, La, Y, Pr, Gd, Dy, Ho, Nd, Sm, Ca, Sr, Bi, Cd, Sn, Zn</label>
                                </div>
                            </div>{# A end species#}
                            <div class="dividing"></div>
                            <div class="form-group">
                                <div class="col-sm-1"></div>
                                <div class="col-sm-1"><span class="label label-primary">&nbsp;&nbsp;B:&nbsp;&nbsp;</span></div>
                                <div class="col-sm-10">
                                    <label for="bsite_s1" class="col-sm-2 control-label">{% trans 'site 1#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="bsite_s1" name="bsite_s1" placeholder="{% trans 'Species 1#' %}">
                                    </div>
                                    <label for="bsite_n1" class="col-sm-2 control-label">{% trans 'num 1#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="bsite_n1" name="bsite_n1" placeholder="{% trans 'Number 1#' %}">
                                    </div>
                                </div>
                            </div>{# B 1# #}
                            <div class="form-group">
{#                                <div class="col-sm-2">#}
{#                                    <label class="species">Fe,V,Cr,Mn,Sc,Co,Ti,Mg,Ni</label>#}
{#                                </div>#}
                                <div class="col-sm-offset-2 col-sm-10">
                                    <label for="bsite_s2" class="col-sm-2 control-label">{% trans 'site 2#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control s" id="bsite_s2" name="bsite_s2" placeholder="{% trans 'Species 2#' %}">
                                    </div>
                                    <label for="bsite_n2" class="col-sm-2 control-label">{% trans 'num 2#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control n" id="bsite_n2" name="bsite_n2" placeholder="{% trans 'Number 2#' %}" disabled>
                                    </div>
                                </div>
                            </div>{# B 2# #}
                            <div class="form-group">
{#                                <div class="col-sm-2">#}
{#                                    <label class="species">Zr,Ga,Hf,Nb,Ta,Re,Tc,Ir,Os<br>Ru,Rh,Al,Cu,Pt,Zn</label>#}
{#                                </div>#}
                                <div class="col-sm-offset-2 col-sm-10">
                                    <label for="bsite_s3" class="col-sm-2 control-label">{% trans 'site 3#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control s" id="bsite_s3" name="bsite_s3" placeholder="{% trans 'Species 3#' %}">
                                    </div>
                                    <label for="bsite_n3" class="col-sm-2 control-label">{% trans 'num 3#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control n" id="bsite_n3" name="bsite_n3" placeholder="{% trans 'Number 3#' %}" disabled>
                                    </div>
                                </div>
                            </div>{# B 3# #}
                            <div class="form-group">
{#                                <div class="col-sm-2">#}
{#                                    <label class="species">Ca,Sr,Bi,Cd,Sn,Zn</label>#}
{#                                </div>#}
                                <div class="col-sm-offset-2 col-sm-10 contain-species">
                                    <label class="species">{% trans 'Species for B site' %}: Fe, V, Cr, Mn, Sc, Co, Ti, Mg, Ni, Zr, Ga, Hf, Nb, Ta, Re, Tc, Ir, Os, Ru, Rh, Al, Cu, Pt, Zn</label>
                                </div>
                            </div>{# B end species#}
                            <div class="dividing"></div>
                            <div class="form-group">
                                <div class="col-sm-1"></div>
                                <div class="col-sm-1"><span class="label label-primary">&nbsp;&nbsp;X:&nbsp;&nbsp;</span></div>
                                <div class="col-sm-10">
                                    <label for="xsite_s" class="col-sm-2 control-label">{% trans 'site 1#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="xsite_s" name="xsite_s" value="O" disabled>
                                    </div>
                                    <label for="xsite_n" class="col-sm-2 control-label">{% trans 'num 1#:' %} </label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="xsite_n" name="xsite_n" placeholder="{% trans 'Number 1#' %}">
                                    </div>
                                </div>
                            </div>{# X 1# #}
                            <div class="form-group">
                                <div class="col-sm-offset-5 col-sm-7">
                                    <button type="submit" class="btn btn-primary register_btn" id="register-button">{% trans 'Compute' %}</button>
                                </div>
                            </div>{# compute #}
                        </form>
                    </div>{# row #}
                    </div>{# col-lg-8 #}
                    <div class="col-lg-2 col-sm-2"></div>
                </div>{# row #}
            </div>
{#            <div class="tab-pane">#}
{#                <div class="">#}
{#                    <p class="help-p"><b>Instructions</b></p>#}
{#                    <p class="help-p">Enter species in the A and B sites of the ABX perovskite, and then enter the corresponding quantity.</p>#}
{#                    <ul>#}
{#                        <li class="help-p">#}
{#                            Species  on A site such as:<br>#}
{#                            <b>Ba, La, Y, Pr, Gd, Dy, Ho, Nd, Sm, Ca, Sr, Bi, Cd, Sn, Zn</b><br>#}
{#                        </li>#}
{#                        <li class="help-p">#}
{#                            Species on B site such as:<br>#}
{#                            <b>Fe, V, Cr, Mn, Sc, Co, Ti, Mg, Ni, Zr, Ga, Hf, Nb, Ta, Re, Tc, Ir, Os, Ru, Rh, Al, Cu, Pt, Zn</b><br>#}
{#                        </li>#}
{#                        <li class="help-p">#}
{#                            Species on X site is O element that is confirmed.#}
{#                        </li>#}
{#                    </ul>#}
{#                    <br>#}
{#                    <p class="help-p">Frequency heat map of all constituent elements in the dataset of perovskites. </p>#}
{#                    <p class="help-p"><b>These results suggest the model is useful to quickly identify stable and near-stable perovskite oxides when the elements appear frequently in the database.</b></p>#}
{#                    <img class="heat-img" src="{% static 'image/heat.jpg' %}" alt="heat map">#}
{#                </div>#}
{#            </div>{# tab pane #}
{#            </br>#}
{#            </br>#}
        </div>{# panel-body #}
    </div>{# panel-default #}
    </br>
    <div class="row">
      <div class="col-md-12">
        <h3 style="margin: 5px;color: #757575;">{% trans 'Cite:' %}</h3>
        <ol id="cite">
          <li>
            Li W, Jacobs R, Morgan D. Predicting the thermodynamic stability of perovskite oxides using machine learning models[J]. Computational Materials Science, 2018, 150: 454-463.
            <a href="https://doi.org/10.1016/j.commatsci.2018.04.033"target="_blank">doi.org/10.1016/j.commatsci.2018.04.033</a>
          </li>
          <li>
            Li W, Jacobs R, Morgan D. Data and Supplemental information for predicting the thermodynamic stability of perovskite oxides using machine learning models[J]. Data in Brief, 2018, 19: 261-263.
            <a href="https://doi.org/10.1016/j.dib.2018.05.007" target="_blank">doi.org/10.1016/j.dib.2018.05.007</a>
          </li>
        </ol>
      </div>
    </div>
    </br>
    </br>
    <div class="panel panel-default">
        <div class="panel-body">
            <h3 style="text-align: center">{% trans 'Predictions' %}</h3>
            <div class="dividing"></div>
            <div class="tab-pane">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <section id="result">

                            </section>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane">
                <div class="">
                    <p class="help-p"><b>{% trans 'Definitions' %}</b></p>
                    <ul>
                        <li class="help-p">
                            {% trans 'Formula unit' %} (fu) :<label id="formula"></label>
                        </li>
{#                        <li class="help-p">#}
{#                            Classification : 0-unstable; 1-stable.#}
{#                            <p><b>note:</b>We have used an Ehull value of 40 meV/atom as the threshold to separate stable and unstable perovskites (i.e., Ehull ≤ 40 meV/atom is a stable compound)</p>#}
{#                        </li>#}
                        <li class="help-p">
                            E<sub>hull</sub> (meV/atom) : {% trans 'Energy above convex hull' %}
{#                            <p><b>note:</b>Sometimes,Classification's result and E<sub>hull</sub>'s ones are inconsistent.</p>#}
                        </li>
                        <li class="help-p">
                            E<sub>f</sub> (eV/atom) : {% trans 'Formation energy from binary oxides of same oxidation state' %}
                        </li>
                        <li class="help-p">
                            {% trans '<b>We declare</b>: we use an E<sub>hull</sub> value of <b>40</b> meV/atom as the threshold to' %}
                            {% trans 'separate stable and unstable perovskites (i.e., E<sub>hull</sub> ≤ 40 meV/atom is a stable compound).' %}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
      </div>
 </div>{# page container #}
{% endblock %}

{% block pageFootExtra %}
    <link href="{% static 'css/material/perovskite.css' %} " rel="stylesheet">

    <script src="{% static 'js/vendor/formValidation.min.js' %}"></script>
    <script src="{% static 'js/vendor/formValidation.bootstrap.min.js' %}"></script>
    <script src="{% static 'js/material/perovskite.js' %}"></script>
{% endblock %}